<template>
  <!-- #122c45 -->
  <div class="Page">
    <vue-particles :particleOpacity="0.1" :particlesNumber="150" :lineOpacity="0.1" shapeType="edge"
                   style="width: 100%;height: 100%; position: absolute;z-index: 0;"></vue-particles>
    <el-row style="padding-top: 10px;">
      <el-col :span="8" style="font-weight: bolder;">
        <span style="color: white;margin-left: 40px;padding-top: 20px;">
          日期
          <span style="color: #20a0ff;margin-left: 5px;">{{ nowTime }}</span>
        </span>
        <span style="color: white;margin-left: 40px;padding-top: 20px;">
          天气
          <span style="color: #ee9900;margin-left: 5px;"><i class="el-icon-cloudy" style="font-size: 22px;"></i>多云</span>
        </span>
        <span style="color: white;margin-left: 40px;padding-top: 20px;">
          温度
          <span style="color: #a2f1ba;margin-left: 5px;">17℃</span>
        </span>
      </el-col>
      <div class='panel'>
        <el-col class="Title panel-head" :span="8">{{ title }}</el-col>
      </div>

      <el-col :span="8">
        <el-row>

          <el-col :span="7" style="font-weight: bolder;">
            <span style="color: white;margin-left: 40px;padding-top: 20px;">
              游客数量
              <span style="color: #006b65;margin-left: 5px;">1205人</span>
            </span>
          </el-col>
          <el-col :span="7" style="font-weight: bolder;">
            <span style="color: white;margin-left: 40px;padding-top: 20px;">
              运维人员
              <span style="color: #006b65;margin-left: 5px;">100人</span>
            </span>
          </el-col>

          <el-col :span="10">
            <el-row>
              <el-col :span="12">
                <el-tooltip class="item" effect="dark" content="智慧大屏" placement="bottom">
                  <!--
                  <el-button type="success" icon="el-icon-monitor" circle></el-button>
                  -->
                  <i class="el-icon-monitor" style="font-size: 24px; color: #8c939d;"></i>
                </el-tooltip>
              </el-col>
              <el-col :span="12">
                <el-button type="info" style="float: right; margin-right: 8px;"  size="mini" @click="toIndex" icon="el-icon-caret-left">主菜单</el-button>
<!--                <el-button type="info" round style="float: right; margin-right: 5px;" @click="toIndex">返回<i class="el-icon-circle-close"></i></el-button>-->
              </el-col>
            </el-row>
          </el-col>

        </el-row>
      </el-col>
      <el-col class="TopMain" :span="24">
        <el-row>
          <el-col :span="7">
            <el-row>
              <el-col :span="24">
                <v-chart class="BroadcastOnlineChart" :options="broadcastOnlineOptions"/>
              </el-col>
              <el-col :span="24">
                <v-chart class="WaterQualityChart" :options="waterQualityOptions"/>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="10">
            <v-chart class="map" :options="mapOptions"/>
          </el-col>
          <el-col :span="7">
            <el-row>
              <el-col :span="24">
                <v-chart class="WifiConnectChart" :options="wifiConnectOptions"/>
              </el-col>
              <el-col :span="24">
                <el-row class="VehicleArea">
                  <el-col :span="20" style="padding-right: 10px;">
                    <div style="width: 100%;height: 260px;">
                      <el-row>
                        <el-col :span="12">
                          <el-row>
                            <el-col :span="24" style="text-align: center;">
                              <el-progress type="dashboard" :percentage="25" :show-text="false" :width="96" :stroke-width="8"></el-progress>
                            </el-col>
                            <el-col :span="24" style="text-align: center;">
                              <span style="color: white;">设备数量 156</span>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="12">
                          <el-row>
                            <el-col :span="24" style="text-align: center;">
                              <el-progress type="dashboard" :percentage="75" status="exception" :show-text="false" :width="96" :stroke-width="8"></el-progress>
                            </el-col>
                            <el-col :span="24" style="text-align: center;">
                              <span style="color: white;">设备故障 001</span>
                            </el-col>
                          </el-row>
                        </el-col>

                        <el-col :span="8">
                          <el-row>
                            <el-col :span="24" style="text-align: center;">
                              <el-progress type="dashboard" :percentage="88" status="success" :show-text="false" :width="96" :stroke-width="8"></el-progress>
                            </el-col>
                            <el-col :span="24" style="text-align: center;">
                              <span style="color: white;">订单总数 887</span>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="24" style="text-align: center;">
                              <el-progress type="dashboard" :percentage="21" status="warning" :show-text="false" :width="96" :stroke-width="8"></el-progress>
                            </el-col>
                            <el-col :span="24" style="text-align: center;">
                              <span style="color: white;">预约订单 128</span>
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="8">
                          <el-row>
                            <el-col :span="24" style="text-align: center;">
                              <el-progress type="dashboard" :percentage="56" color="grey" :show-text="false" :width="96" :stroke-width="8"></el-progress>
                            </el-col>
                            <el-col :span="24" style="text-align: center;">
                              <span style="color: white;">核销订单 554</span>
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>

                      <!--
                      <el-table :data="VehicleTableData" style="width: 100%;background-color: transparent !important;" :header-row-style="{ backgroundColor: 'red'}" :row-style="{ backgroundColor: 'transparent' }">
                        <el-table-column prop="itemName" label="项目名称" width="120"></el-table-column>
                        <el-table-column prop="itemQuantifier" label="计数单位" width="120"></el-table-column>
                        <el-table-column prop="number" label="数据大小" width="120"></el-table-column>
                        <el-table-column prop="added" label="同比增长" width="120"></el-table-column>
                      </el-table>
                      -->
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <el-row>
                      <el-col :span="24" style="margin-top: 10px;">
                        <el-tag type="success" effect="plain">风景游船</el-tag>
                      </el-col>
                      <el-col :span="24" style="margin-top: 10px;">
                        <el-tag type="info" effect="plain">动力火车</el-tag>
                      </el-col>
                      <el-col :span="24" style="margin-top: 10px;">
                        <el-tag type="info" effect="plain">观光小车</el-tag>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="BottomMain" :span="24">
        <el-row>
          <el-col :span="5">
            <v-chart class="ParkingChart" :options="parkingOptions"/>
          </el-col>
          <el-col :span="5">
            <v-chart class="MistRiseChart" :options="MistRiseOptions"/>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col style="text-align: center;">
                <span style="color: #ffffff; font-weight: bolder; font-size: 18px;">异常设备统计</span>
              </el-col>
              <el-col style="text-align: center;">
                <small style="color: #808080; ">The Statistics Table Of Abnormal Devices</small>
                <!--                <span style="color: white; font-size: 18px;">The Statistics Table Of Abnormal Devices</span>-->
              </el-col>
              <el-col>
                <el-table :data="AlarmTableData"
                          style="width: 100%;background-color: transparent !important;margin-top: 5px;"
                          :header-row-style="{ backgroundColor: 'rgb(130 130 130 / 48%)', color: 'white'}"
                          :row-style="{ backgroundColor: 'transparent' }"
                          :header-cell-style="{ backgroundColor: 'transparent' }">
                  <el-table-column style="background-color: transparent;" prop="serviceName" label="设备名称" width="160"></el-table-column>
                  <el-table-column prop="alarmTime" label="报警时间" width="160"></el-table-column>
                  <el-table-column prop="alarmMessage" label="报警事项" width="160"></el-table-column>
                  <el-table-column prop="ipAddress" label="IP地址" width="160"></el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <v-chart class="AreaMonitorChart" :options="areaMonitorOptions"/>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ReallyTimeChart from "./components/reallyTimeChart";
import MainImage from "@/components/Basic/Image/MainImage.vue";


export default {
  name: 'Dashboard',
  data: () => ({
    title: "阳陂湖综合管理数据看板",

    vehicleTab: "tab1",

    timer: 0,
    nowTime: new Date().toLocaleString(),


    VehicleTableData: [
      {itemName: '设备总数', itemQuantifier: '个', number: 100, added: "+20%"},
      {itemName: '设备故障', itemQuantifier: '个', number: 1, added: "-80%"},
      {itemName: '今日订单', itemQuantifier: '条', number: 778, added: "+5.3%"},
      {itemName: '游园预约', itemQuantifier: '个', number: 153, added: "+93.9%"},
      {itemName: '核销完成', itemQuantifier: '个', number: 253, added: "+17.7%"},
    ],
    AlarmTableData: [
      {serviceName: '监控1011', alarmTime: '2020/10/08 18:54:56', alarmMessage: "离线", ipAddress: "192.168.99.11"},
      {serviceName: '监控1021', alarmTime: '2020/10/08 18:53:46', alarmMessage: "离线", ipAddress: "192.168.99.21"},
      {serviceName: '监控1033', alarmTime: '2020/10/08 18:53:20', alarmMessage: "离线", ipAddress: "192.168.99.33"},
      {serviceName: '监控1054', alarmTime: '2020/10/08 18:51:33', alarmMessage: "离线", ipAddress: "192.168.99.54"},
      {serviceName: '监控1088', alarmTime: '2020/10/08 18:43:01', alarmMessage: "离线", ipAddress: "192.168.99.88"},
    ],
  }),
  computed: {
    // 广播在线统计图
    broadcastOnlineOptions() {
      return {
        title: {
          text: '广播在线统计图',
          subtext: 'The Online Statistics Charts Of Broadcast',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '10%',
          top: '10%',
          data: ['在线设备', '离线设备', '故障设备',],
          textStyle: {
            color: "#FFFFFF"
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 854, name: '在线设备', itemStyle: {color: "#89a0af"}},
              {value: 107, name: '离线设备', itemStyle: {color: "#d2c4b3"}},
              {value: 27, name: '故障设备', itemStyle: {color: "#d04c00"}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    // 区域监控统计图
    areaMonitorOptions() {
      return {
        title: {
          text: "区域监控数量统计图",
          subtext: 'The Quantity Statistics Charts Of Area Monitors',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data:
            [
              {name: '设备数量', icon: 'circle', textStyle: {color: '#ccc'}},
              {name: '区域面积', icon: 'circle', textStyle: {color: '#ccc'}},
              {name: '设备单位面积比', icon: 'circle', textStyle: {color: '#ccc'}},
            ],

          // ['设备数量', '区域面积', '设备单位面积比'],
          top: '60',
          textStyle: {
            color: "#FFFFFF"
          }
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '120',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: [
              {value: '区域A', textStyle: {color: '#FFFFFF'},},
              {value: '区域B', textStyle: {color: '#FFFFFF'},},
              {value: '区域C', textStyle: {color: '#FFFFFF'},},
              {value: '区域D', textStyle: {color: '#FFFFFF'},},
              {value: '区域E', textStyle: {color: '#FFFFFF'},},
              {value: '区域F', textStyle: {color: '#FFFFFF'},},
              {value: '区域G', textStyle: {color: '#FFFFFF'},},
            ],
            textStyle: {
              color: "#FFFFFF"
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '设备数量',
            type: 'bar',
            stack: '设备数量',
            itemStyle: {
              color: "#89a0af"
            },
            data:
              [
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
                {value: 33, itemStyle: {color: "#89a0af"}},
              ]
            // [1045, 886, 998, 880, 1104, 789, 1044],
          },
          {
            name: '区域面积',
            type: 'bar',
            stack: '区域面积',
            itemStyle: {
              color: "#9696f3"
            },
            data:

              [
                {value: 33, itemStyle: {color: "#9696f3"}},
                {value: 53, itemStyle: {color: "#9696f3"}},
                {value: 27, itemStyle: {color: "#9696f3"}},
                {value: 27, itemStyle: {color: "#9696f3"}},
                {value: 27, itemStyle: {color: "#9696f3"}},
                {value: 27, itemStyle: {color: "#9696f3"}},
                {value: 27, itemStyle: {color: "#9696f3"}},
              ]
            // [288, 960, 543, 245, 687, 888, 123]
          },
          {
            name: '设备单位面积比',
            type: 'bar',
            stack: '设备单位面积比',
            itemStyle: {
              color: "#977594"
            },
            data:
              [
                {value: 33, itemStyle: {color: "#977594"}},
                {value: 53, itemStyle: {color: "#977594"}},
                {value: 42, itemStyle: {color: "#977594"}},
                {value: 64, itemStyle: {color: "#977594"}},
                {value: 22, itemStyle: {color: "#977594"}},
                {value: 12, itemStyle: {color: "#977594"}},
                {value: 5, itemStyle: {color: "#977594"}},
              ]
            // [104500 / 288, 88600 / 960, 99800 / 543, 88000 / 245, 110400 / 687, 78900 / 888, 104400 / 123]
          },
        ]
      }
    },
    // WIFI连接统计图
    wifiConnectOptions() {
      return {
        title: {
          text: 'WIFI连接统计图',
          subtext: 'The Connect Statistics Charts Of WIFI',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '4%',
          right: '125',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          data: [
            {value: '0点', textStyle: {color: '#FFFFFF'},},
            {value: '1点', textStyle: {color: '#FFFFFF'},},
            {value: '2点', textStyle: {color: '#FFFFFF'},},
            {value: '3点', textStyle: {color: '#FFFFFF'},},
            {value: '4点', textStyle: {color: '#FFFFFF'},},
            {value: '5点', textStyle: {color: '#FFFFFF'},},
            {value: '6点', textStyle: {color: '#FFFFFF'},},
            {value: '7点', textStyle: {color: '#FFFFFF'},},
            {value: '8点', textStyle: {color: '#FFFFFF'},},
            {value: '9点', textStyle: {color: '#FFFFFF'},},
            {value: '10点', textStyle: {color: '#FFFFFF'},},
            {value: '11点', textStyle: {color: '#FFFFFF'},},
            {value: '12点', textStyle: {color: '#FFFFFF'},},
            {value: '13点', textStyle: {color: '#FFFFFF'},},
            {value: '14点', textStyle: {color: '#FFFFFF'},},
            {value: '15点', textStyle: {color: '#FFFFFF'},},
            {value: '16点', textStyle: {color: '#FFFFFF'},},
            {value: '17点', textStyle: {color: '#FFFFFF'},},
            {value: '18点', textStyle: {color: '#FFFFFF'},},
            {value: '19点', textStyle: {color: '#FFFFFF'},},
            {value: '20点', textStyle: {color: '#FFFFFF'},},
            {value: '21点', textStyle: {color: '#FFFFFF'},},
            {value: '22点', textStyle: {color: '#FFFFFF'},},
            {value: '23点', textStyle: {color: '#FFFFFF'},},
            {value: '24点', textStyle: {color: '#FFFFFF'},},
          ]
        },
        yAxis: {
          splitLine: {
            show: false
          }
        },
        dataZoom: [{
          startValue: '0点'
        }, {
          type: 'inside'
        }],
        visualMap: {
          top: '20%',
          right: 10,
          textStyle: {
            color: "#FFFFFF"
          },
          pieces: [{
            gt: 0,
            lte: 50,
            color: '#096'
          }, {
            gt: 50,
            lte: 100,
            color: '#ffde33'
          }, {
            gt: 100,
            lte: 150,
            color: '#ff9933'
          }, {
            gt: 150,
            lte: 200,
            color: '#cc0033'
          }, {
            gt: 200,
            lte: 300,
            color: '#660099'
          }, {
            gt: 300,
            color: '#7e0023'
          }],
          outOfRange: {
            color: '#999'
          }
        },
        series: {
          name: '连接数',
          type: 'line',
          data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 80, 75, 86, 54, 12, 13, 15, 65, 98, 71, 51, 87, 24, 108, 300],
          markLine: {
            silent: true,
            data: [{
              yAxis: 50,
            }, {
              yAxis: 100
            }, {
              yAxis: 150
            }, {
              yAxis: 200
            }, {
              yAxis: 300
            }]
          }
        }
      }
    },
    // 智慧停车统计图
    parkingOptions() {
      return {
        title: {
          text: '智慧停车分析图',
          subtext: 'The Statistics Charts Of Parking',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '2%',
          bottom: '5%',
          data: ['已用车位', '可用车位', '维护车位',],
          textStyle: {
            color: "#FFFFFF"
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['28%', '48%'],
            center: ['55%', '55%'],
            data: [
              {value: 102, name: '已用车位', itemStyle: {color: "#5d72bd"}},
              {value: 80, name: '可用车位', itemStyle: {color: "#5680fc"}},
              {value: 18, name: '维护车位', itemStyle: {color: "#4c4c4c"}},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    // 水质统计图
    waterQualityOptions() {
      return {
        title: {
          text: '区域水质分析统计图',
          subtext: 'The Analysis Statistics Charts Of Water Quality',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {},
        visualMap: {
          max: 50,
          left: '50',
          bottom: '50',
          inRange: {
            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
          }
        },
        xAxis3D: {
          type: 'category',
          data: ['1-5日', '6-10日', '11-15日', '16-20日', '21-25日', '26-30日']
        },
        yAxis3D: {
          type: 'category',
          data: ['10月', '9月', '8月', '7月', '6月', '5月']
        },
        zAxis3D: {
          type: 'value'
        },
        grid3D: {
          boxWidth: 220,
          boxDepth: 80,
          viewControl: {
            // projection: 'orthographic'
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [{
          type: 'bar3D',
          data: [[0, 0, 5], [0, 1, 1], [0, 2, 0], [0, 3, 17], [0, 4, 0], [0, 5, 0], [1, 0, 7], [1, 1, 18], [1, 2, 0], [1, 3, 15], [1, 4, 0], [1, 5, 12], [2, 0, 1], [2, 1, 1], [2, 2, 31], [2, 3, 11], [2, 4, 10], [2, 5, 20], [3, 0, 7], [3, 1, 3], [3, 2, 13], [3, 3, 7], [3, 4, 8], [3, 5, 10], [4, 0, 1], [4, 1, 3], [4, 2, 5], [4, 3, 20], [4, 4, 0], [4, 5, 1], [5, 0, 25], [5, 1, 1], [5, 2, 18], [5, 3, 3], [5, 4, 6], [5, 5, 1]].map(function (item) {
            return {
              value: [item[1], item[0], item[2]],
            }
          }),
          shading: 'lambert',

          label: {
            textStyle: {
              fontSize: 16,
              borderWidth: 1
            }
          },

          emphasis: {
            label: {
              textStyle: {
                fontSize: 20,
                color: '#900'
              }
            },
            itemStyle: {
              color: '#900'
            }
          }
        }]
      }
    },
    // 雾升统计图
    MistRiseOptions() {
      return {
        title: {
          text: '雾升设备统计图',
          subtext: 'The Analysis Statistics Charts Of Mist Rise',
          textStyle: {
            color: "#FFFFFF",
          },
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['设备A水量', '设备B水量', '设备C水量', '设备D水量', '设备E水量'],
          top: '50',
          textStyle: {
            color: "#FFFFFF"
          }
        },
        grid: {
          top: '100',
          left: '2%',
          right: '10%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['0时', '6时', '9时', '12时', '15时', '18时', '21时']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '设备A水量',
            type: 'line',
            stack: '设备A水量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '设备B水量',
            type: 'line',
            stack: '设备B水量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '设备C水量',
            type: 'line',
            stack: '设备C水量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '设备D水量',
            type: 'line',
            stack: '设备D水量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '设备E水量',
            type: 'line',
            stack: '设备E水量',
            label: {
              normal: {
                show: true,
                position: 'top'
              }
            },
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    },


    serviceOnlineStatisticOptions() {
      return {
        title: {
          text: '设备在线离线统计图',
          subtext: '故障设备不计算在离线设备中',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['在线设备', '离线设备', '故障设备',]
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 854, name: '在线设备'},
              {value: 107, name: '离线设备'},
              {value: 27, name: '故障设备'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    },
    mapOptions() {
      return {
        /*
        title: {
          text: '游客来源统计大地图',
          textStyle: {
            color: "white"
          },
          subtext: '故障设备不计算在离线设备中',
          left: 'center'
        },
        */
        //backgroundColor: '#015448',
        geo: {
          map: 'china',
          aspectScale: 0.75, //长宽比
          zoom: 1.1,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
              shadowColor: 'rgb(58,115,192)',
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: '#2AB8FF',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              }
            }
          },
          regions: [{
            name: '南海诸岛',
            itemStyle: {
              areaColor: 'rgba(0, 10, 52, 1)',
              borderColor: 'rgba(0, 10, 52, 1)',
              normal: {
                opacity: 0,
                label: {
                  show: false,
                  color: "#009cc9",
                }
              }
            },
          }],
        },
        series: [{
          type: 'map',
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            },
            emphasis: {
              textStyle: {
                color: 'rgb(183,185,14)',
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgb(147, 235, 248)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [{
                  offset: 0,
                  color: '#09132c' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#274d68' // 100% 处的颜色
                }],
                globalCoord: true // 缺省为 false
              },
            },
            emphasis: {
              areaColor: 'rgb(46,229,206)',
              borderWidth: 0.1
            }
          },
          zoom: 1.25,
          map: 'china' //使用
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          showEffectOn: 'render',
          zlevel: 1,
          rippleEffect: {
            period: 15,
            scale: 4,
            brushType: 'fill'
          },
          hoverAnimation: true,
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              offset: [15, 0],
              color: '#1DE9B6',
              show: true
            },
          },
          itemStyle: {
            normal: {
              color: '#1DE9B6',
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          symbolSize: 12,
          // 圆圈位置
          data: [
            {
              value: [118.8062, 31.9208],
              itemStyle: {
                color: '#4ab2e5'
              }
            }, {
              value: [127.9688, 45.368],
              itemStyle: {
                color: '#4fb6d2'
              }
            }, {
              value: [110.3467, 41.4899],
              itemStyle: {
                color: '#52b9c7'
              }
            }, {
              value: [125.8154, 44.2584],
              itemStyle: {
                color: '#5abead'
              }
            }, {
              value: [116.4551, 40.2539],
              itemStyle: {
                color: '#f34e2b'
              }
            }, {
              value: [123.1238, 42.1216],
              itemStyle: {
                color: '#f56321'
              }
            }, {
              value: [114.4995, 38.1006],
              itemStyle: {
                color: '#f56f1c'
              }
            }, {
              value: [117.4219, 39.4189],
              itemStyle: {
                color: '#f58414'
              }
            }, {
              value: [112.3352, 37.9413],
              itemStyle: {
                color: '#f58f0e'
              }
            }, {
              value: [109.1162, 34.2004],
              itemStyle: {
                color: '#f5a305'
              }
            }, {
              value: [103.5901, 36.3043],
              itemStyle: {
                color: '#e7ab0b'
              }
            }, {
              value: [106.3586, 38.1775],
              itemStyle: {
                color: '#dfae10'
              }
            }, {
              value: [101.4038, 36.8207],
              itemStyle: {
                color: '#d5b314'
              }
            }, {
              value: [103.9526, 30.7617],
              itemStyle: {
                color: '#c1bb1f'
              }
            }, {
              value: [108.384366, 30.439702],
              itemStyle: {
                color: '#b9be23'
              }
            }, {
              value: [113.0823, 28.2568],
              itemStyle: {
                color: '#a6c62c'
              }
            }, {
              value: [102.9199, 25.46639],
              itemStyle: {
                color: '#96cc34'
              }
            }, {
              value: [122.794189,28.661671]
            }]
        }, //地图线的动画效果
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', //箭头图标
              symbolSize: 7, //图标大小
            },
            lineStyle: {
              normal: {
                color: '#1DE9B6',
                width: 1, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: .3 //尾迹线条曲直度
              }
            },
            data: [
              {
                coords: [
                  [118.8062, 31.9208],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#4ab2e5'
                }
              }, {
                coords: [
                  [127.9688, 45.368],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#4fb6d2'
                }
              }, {
                coords: [
                  [110.3467, 41.4899],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#52b9c7'
                }
              }, {
                coords: [
                  [125.8154, 44.2584],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#5abead'
                }
              }, {
                coords: [
                  [116.4551, 40.2539],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f34e2b'
                }
              }, {
                coords: [
                  [123.1238, 42.1216],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f56321'
                }
              }, {
                coords: [
                  [114.4995, 38.1006],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f56f1c'
                }
              }, {
                coords: [
                  [117.4219, 39.4189],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f58414'
                }
              }, {
                coords: [
                  [112.3352, 37.9413],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f58f0e'
                }
              }, {
                coords: [
                  [109.1162, 34.2004],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#f5a305'
                }
              }, {
                coords: [
                  [103.5901, 36.3043],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#e7ab0b'
                }
              }, {
                coords: [
                  [106.3586, 38.1775],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#dfae10'
                }
              }, {
                coords: [
                  [101.4038, 36.8207],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#d5b314'
                }
              }, {
                coords: [
                  [103.9526, 30.7617],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#c1bb1f'
                }
              }, {
                coords: [
                  [108.384366, 30.439702],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#b9be23'
                }
              }, {
                coords: [
                  [113.0823, 28.2568],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#a6c62c'
                }
              }, {
                coords: [
                  [102.9199, 25.46639],
                  [122.794189,28.661671]
                ],
                lineStyle: {
                  color: '#96cc34'
                }
              }]
          }

        ]
      }
    },
  },
  methods: {
    toIndex() {
      this.$router.push("/")
    }
  },
  created() {
    this.$store.commit("CLOSE_SIDEBAR", false)
    setInterval(() => {
      this.nowTime = new Date().toLocaleString()
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
$_chart_titleHeight: 60px;
$_chart_mainHeight: calc(100vh - 10px - #{$_chart_titleHeight});

.Page {
  //#091332
  background: linear-gradient(to right top, #0e343d, #162450, #090b38);
  padding-left: 1rem;
  padding-right: 1rem;
  box-shadow: 0 0 3rem rgba(100, 200, 255, .5) inset;
}

.Title {
  height: $_chart_titleHeight;
  text-align: center;
  font-family: "Microsoft YaHei", serif;
  font-size: 36px;
  color: white;
  background: linear-gradient(#3f697d, #111b47);
  border: 2px solid rgba(0, 90, 120, 0.3);
}

.Title:hover{
  filter:brightness(1.2)
}

.TopMain {
  height: calc(#{$_chart_mainHeight} / 3 * 2);
}

.BottomMain {
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.BroadcastOnlineChart {
  width: 550px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.AreaMonitorChart {
  width: 480px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.WifiConnectChart {
  width: 550px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.VehicleArea {
  width: 550px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.ParkingChart {
  width: 399px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.MistRiseChart {
  width: 399px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.WaterQualityChart1 {
  width: 313px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}

.WaterQualityChart {
  width: 626px;
  height: calc(#{$_chart_mainHeight} / 3 * 1);
}


.serviceOnlineStatisticChart {
  width: 100%;
  height: calc(#{$_chart_mainHeight} / 3);
}

.map {
  width: 780px;
  height: calc(#{$_chart_mainHeight} / 3 * 2);
}

.VehicleTableClass {
  background-color: transparent !important;
}
</style>
